<template>
	<div style="width: 100%;">
		<div class="head2">
			<div style="display: flex;">
				<router-link to="/moblie/mysecret">
					<img src="../../assets/img/mobile/返回.png" style="width: 2rem;">
				</router-link>
				<h3 style="margin-top: 0.2rem;"><i class="el-icon-notebook-2"></i>&nbsp;我的购物车清单</h3>
			</div>
		</div>
		<div style="width: 100%;">
			<div class="carts">
				<el-table :data="carts">
					<el-table-column min-width="35">
						<template slot-scope="scope">
							<el-checkbox v-model="scope.row.checked" size="large">
							</el-checkbox>
						</template>
					</el-table-column>
					<el-table-column class="cartimg" label="图片">
						<template slot-scope="scope">
							<div style="width: 10%;">
								<img :src="`http://127.0.0.1/api/public/showimg/${scope.row.book.pic}`"
									style="width: 5rem; height: 100%;margin-left: -2rem;" />
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="book.name" label="商品名称">
					</el-table-column>
					<el-table-column prop="price" label="商品价钱">
					</el-table-column>
					<el-table-column label="商品数量" width="150rem" style="margin-left: -5rem;">
						<template slot-scope="scope">
							<el-input-number size="mini" v-model="scope.row.num" controls-position="right" :min="1" :max="scope.row.number" class="input-number-left-margin">
							</el-input-number>
						</template>
					</el-table-column>
				</el-table>
				<div></div>
				<div class="price">
					<h3>总价:&nbsp;</h3>
					<div class="prcnum">
						{{getprice}} &yen;
					</div>
					<div style="width:5rem"></div>
					<el-button szie="samll" type="danger" @click="goOrder()" style="width: 250px;">去下单</el-button>
				</div>
				<div style="height: 1px;  background-color: lightgrey;"></div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'PCCart',
		data() {
			return {
				// 购物车商品列表  
				carts: [],
				// 购物车商品总价
				count: 0,
			}
		},
		computed: {
			// 计算购物车中选中商品的总价 
			getprice: function() {
				let pic = 0;
				for (let i = 0; i < this.carts.length; i++) {
					if (this.carts[i].checked == true) {
						pic += this.carts[i].price * this.carts[i].num
					}
				}
				this.count = pic;
				return this.count
			}
		},
		methods: {
			//下单，生成订单
			goOrder() {
				// 清除 Vuex 中的商品列表 
				this.$store.state.goods = [];
				// 遍历购物车中的商品
				for (let i = 0; i < this.carts.length; i++) {
					if (this.carts[i].checked == true) {
						// 检查 Vuex 中是否已存在该商品
						console.log(this.carts[i])
						let findx = -1;
						for (let n = 0; n < this.$store.state.goods.length; n++) {
							if (this.$store.state.goods[n].id == this.carts[i].id) {
								findx = n;
								break;
							}
						}
						// 如果 Vuex 中不存在该商品，则添加 
						if (findx < 0) {
							this.$store.state.goods.push(this.carts[i]);
						}
					}
				}
				// 检查是否有选中的商品
				if (this.$store.state.goods.length < 1) {
					this.$message.error("没有选择下单品种")
					return;
				}
				// 跳转到订单生成页面
				this.$router.push("/moblie/mycarttwo");
			},
			findCart() {
				console.log("购物车加载, 购物车的主键ID 要转为 订单明细的主键 itemid 上传")
				// 发送 GET 请求到 "/api/fore/cart/findMyCarts" 获取购物车商品列表
				this.$get("/api/fore/cart/findMyCarts")
					.then(resp => {
						// 检查响应状态码
						if (resp.data.code == 200) {
							let shop = resp.data.data;
							// 遍历后端返回的商品数据
							for (let i = 0; i < shop.length; i++) {
								console.log(shop[i])
								// 创建一个新的购物车商品对象
								let bksp = {
									book: {}
								}
								// 设置购物车商品对象的属性 
								bksp.id = shop[i].id;
								bksp.book.name = shop[i].book.name;
								bksp.book.pic = shop[i].book.pic;
								bksp.book.id = shop[i].book.id;
								bksp.num = shop[i].num;
								bksp.price = shop[i].price;
								// 将新创建的购物车商品对象添加到本地购物车列表中 
								this.carts.push(bksp)
							}
							console.log(this.carts)
						} else {
							// 如果请求失败，显示错误信息
							this.$message.error(this.data.msg)
						}
					})
			}
		},
		mounted() {
			this.findCart();
		}
	}
</script>

<style scoped>
	.input-number-left-margin {
		width: 5rem;
		margin-left: -0.5rem;
		/* 调整这个值以得到你想要的边距 */
	}
</style>